<template>
    <div class="app-container">
        <el-form :model="postForm" :rules="rules" ref="postForm" label-width="100px" style="width: 80%;">
            <el-form-item label="作者名称" prop="name">
                <el-input v-model="postForm.name"></el-input>
            </el-form-item>
            <el-form-item label="作者图片" prop="imgUrl">
                <el-upload
                        :action="actionUrl"
                        :drag="true"
                        :multiple="false"
                        :with-credentials="true"
                        :show-file-list="true"
                        accept="image/*"
                        :on-success="handleSuccess"
                        :before-upload="beforeUpload"
                        >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，建议尺寸 宽54px * 高54px</div>
                </el-upload>
                <img :src="postForm.imgUrl" style="width:54px; height: 54px;">
            </el-form-item>
            <el-form-item label="作者简介" prop="briefDesc">
                <el-input type="textarea" v-model="postForm.briefDesc"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button v-loading="loading" type="primary" @click="onSubmit">保存</el-button>
                <el-button @click="goBack">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

    import { getDetail, add, update } from '@/api/author';

    export default {
        data() {
            return {
                loading: false,
                actionUrl: process.env.BASE_API + '/common/upload/img',
                postForm: {
                    id: '',
                    name: '',
                    imgUrl: '',
                    briefDesc: ''
                },
                rules: {
                    name: [
                        { required: true, message: '请输入作者姓名', trigger: 'blur' },
                        { min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
                    ],
                    imgUrl: [
                        { required: true, message: '请输入上传作者头像', trigger: 'blur' }
                    ],
                    briefDesc: [
                        { min: 0, max: 255, message: '长度在255个字符以下', trigger: 'blur' }
                    ]
                },
                isUpdate: false
            }
        },
        created() {
            const reg = /\/update\/(\d*)$/
            if (reg.test(this.$route.path)) {
                this.isUpdate = true;
                const ID = RegExp.$1;
                this.fetchData(ID);
            }
        },
        methods: {
            fetchData(ID) {
                getDetail(ID).then(response => {
                    this.postForm.id = response.data.id;
                    this.postForm.name = response.data.name;
                    this.postForm.imgUrl = response.data.imgUrl;
                    this.postForm.briefDesc = response.data.briefDesc;
                }).catch(err => {
                    console.log(err)
                });
            },
            beforeUpload(file) {
                const reg = /(.png|.jpg|.jpeg|.gif|.bmp)$/
                return reg.test(file.name);
            },
            handleSuccess(response) {
                if (response.code === 0) {
                    this.postForm.imgUrl = response.data;
                }
            },
            onSubmit() {
                console.log('submit!');
                const that = this;
                this.$refs.postForm.validate(valid => {
                    console.log(that.$refs.postForm.validate);
                    console.log('valid=' + valid);
                    if (valid) {
                        this.loading = true;
                        if (that.isUpdate) {
                            update(that.postForm).then(response => {
                                if (response.code === 0) {
                                    that.$notify({
                                        title: '成功',
                                        message: '更新成功',
                                        type: 'success',
                                        duration: 2000
                                    });
                                    this.$router.go(-1);
                                } else {
                                    that.$message({
                                        title: '失败',
                                        message: '原因:' + response.msg,
                                        type: 'error',
                                        duration: 3000
                                    });
                                }
                                that.loading = false;
                            }).catch(err => {
                                that.$message({
                                    title: '失败',
                                    message: '原因:' + err.msg ? err.msg : err,
                                    type: 'error',
                                    duration: 3000
                                });
                                that.loading = false;
                            });
                        } else {
                            add(that.postForm).then(response => {
                                if (response.code === 0) {
                                    that.$notify({
                                        title: '成功',
                                        message: '添加成功',
                                        type: 'success',
                                        duration: 2000
                                    });
                                    this.$router.go(-1);
                                } else {
                                    that.$message({
                                        title: '失败',
                                        message: '原因:' + response.msg,
                                        type: 'error',
                                        duration: 3000
                                    });
                                }
                                that.loading = false;
                            }).catch(err => {
                                that.$message({
                                    title: '失败',
                                    message: '原因:' + err.msg ? err.msg : err,
                                    type: 'error',
                                    duration: 3000
                                });
                                that.loading = false;
                            });
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            goBack() {
                this.$router.go(-1);
            }
        }
    }
</script>